<template>
    <div class="container">
      <el-dialog
        width="500px"
        :title="dialog.dialogType === 1 ? 'OCR识别上传发票' : '源文件上传发票'"
        center
        :lock-scroll="true"
        :visible.sync="dialog.dialogVisible"
        @open="getData"
        @close="hideDialog"
      >
        <el-select
          style="width: 400px;"
          clearable
          v-model="inside.value"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请选择供应商"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
        >
          <el-option
            v-for="item in inside.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-upload
          v-if="inside.value"
          style="margin-top: 10px;"
          class="upload-demo"
          action="#"
          :on-remove="handleRemove"
          :multiple="false"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :http-request="handlePreview"
        >
          <el-button size="small" type="primary">发票上传</el-button>
        </el-upload>
        <el-button
          style="margin-top: 10px;"
          v-else
          type="primary"
          @click="insideConfirm()"
          >发票上传</el-button
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="hideDialog">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import { getSupplierOptions } from "@/api/bill";
  import { getToken } from '@/utils/auth'
  export default {
    props: {
      dialog: Object
    },
    data() {
      return {
        inside: {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false
        },
        fileList: [],
        files: []
      };
    },
    created() {},
    methods: {
      //获取修改数据
      getData() {
        this.getSupplierList();
      },
      // 嵌套搜索供应商数据
      insideRemoteMethod(query) {
        if (query !== "") {
          this.getSupplierList(query);
        } else {
          this.inside.options = [];
        }
      },
      //获取供应商数据
      getSupplierList(query = "") {
        let data = {
          supplier_code: query,
          page: 1,
          limit: 50
        };
        this.inside.loading = true;
        getSupplierOptions(data).then(res => {
          this.inside.list = res.data.options.data.map(item => {
            return { value: `${item.code}`, label: `${item.name}(${item.code})` };
          });
          this.inside.loading = false;
        });
      },
      //OCR发票上传
      confirm() {
        let data = new window.FormData();
        for (let i = 0; i < this.files.length; i++) {
          data.append('files[]', this.files[i]);
        }
        data.append("supplier_code", this.inside.value);
        data.append("os", 2);
        // console.log(data, 99999);
        // return;
        this.$axios.defaults.headers.common['X-Token'] = getToken() ? getToken() : ''
        if (this.dialog.dialogType == 1) {
          this.$axios.post("/api/Invoicexd/yonParse", data).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: res.data.message || res.data.msg,
                type: "success"
              });
              this.$emit("updateData");
              this.hideDialog();
            } else {
              this.$message({
                type: "info",
                message: res.data.msg
              });
            }
          });
        } else {
          data.append("type", 1);
          this.$axios.post("/api/Invoicexd/yonUpload", data).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: res.data.message || res.data.msg,
                type: "success"
              });
              this.$emit("updateData");
              this.hideDialog();
            } else {
              this.$message({
                type: "info",
                message: res.data.msg
              });
            }
          });
        }
      },
      insideConfirm() {
        this.$message({
          type: "info",
          message: "请选择供应商"
        });
      },
      handleRemove(file, fileList) {
        // console.log(file,fileList,77777);
        this.fileList = [];
        this.files = [];
      },
      handlePreview(file) {
        // console.log(file,9999);
        this.files.push(file.file);
      },
      handleExceed(files, fileList) {
        // console.log(files,fileList,66666);
        this.$message({
          type: "info",
          message: "发票已上传，请删除已上传发票"
        });
      },
  
      hideDialog() {
        this.inside = {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false
        };
        this.fileList = [];
        this.files = [];
        this.dialog.dialogVisible = false;
      }
    }
  };
  </script>
  <style scoped>
  .top {
    position: relative;
    /* height: 40px; */
  }
  </style>
  